<template>
	<view class="pagebg">
		<view id="container" style="width: 100vw; height: 100vh;"></view>
		<!-- <tabbarVue :current="0"></tabbarVue> -->
	</view>
</template>

<script setup>
	import tabbarVue from '@/components/tabbar/index.vue'
	import {
		loadJScript,
		createDOM
	} from '@/utils/BMapGL.js'
	import {
		ref,
	} from 'vue'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'

	const ak = ref('tk1c97qBl7PegAOyBk7UHbNQe97a2n4k')
	const map = ref(null)
	const markers = ref([
		{
			title:'故宫博物馆',
			bgColor:'#ffffff',
			imgSrc:'https://bj.bcebos.com/v1/mapopen-pub-jsapigl/assets/images/gugong.png',
			pagePath:'https://www.jsvry.com/p/Dv5v8Gjnam?scene_id=78346',
			point:'116.404, 39.925'
		}
	])

	const initBaiduMap = async () => {
		loadJScript(ak.value).then(async mymap => {
			map.value = new BMapGL.Map('container'); // 创建Map实例
			const point = new BMapGL.Point(116.404, 39.915)
			map.value.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
			map.value.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

			//默认标注点样式
			// 创建点标记
			var marker1 = new BMapGL.Marker(new BMapGL.Point(116.408, 39.925));

			// 在地图上添加点标记
			map.value.addOverlay(marker1);
			console.log(map.value)
			
		})
	}

	onLoad(() => {
		initBaiduMap();
	})
	onShow(() => {
		// uni.hideTabBar()
	})
</script>

<style>
	page {
		background: #ffffff;
	}
</style>
<style lang="scss" scoped>

</style>